<template>
  <el-card>
    <el-row :gutter="20" class="header">
      <el-col :span="7">
        <el-input
          :placeholder="$t('tableComment.placeholder')"
          clearable
          v-model="queryForm.query"
        ></el-input>
      </el-col>
      <el-button type="info" plain style="pointer-events: none">{{
        shows
      }}</el-button>
      <el-button
        class="backEpisode"
        type="primary"
        @click="backToEpisode()"
        plain
        >{{ $t('tableComment.back') }}</el-button
      >
    </el-row>
    <el-table
      :data="tableData"
      height="440"
      stripe
      style="width: 100%"
      :cell-style="cellStyle"
    >
      <el-table-column
        :width="item.width"
        :prop="item.prop"
        :label="$t(`tableComment.${item.label}`)"
        v-for="(item, index) in options"
        :key="index"
      >
        <template v-slot="{ row }" v-if="item.prop === 'time'">
          {{ row.time }}
        </template>
        <template v-slot="{ row }" v-else-if="item.prop === 'text'">
          <el-button
            :color="row.color === '#FFFFFF' ? null : row.color"
            plain
            style="pointer-events: none"
            >{{ row.text }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="queryForm.pageNum"
      v-model:page-size="queryForm.pageSize"
      :page-sizes="[5, 10, 20, 30, 40, 50]"
      :size="size"
      :disabled="false"
      :background="false"
      layout="total, sizes, prev, pager, next, jumper"
      :pager-count="4"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { getComments, getShows } from '@/api/comment'
import { ref, watch } from 'vue'
import { options } from './options'

const value1 = ref()

watch(
  () => value1.value,
  () => {
    console.log(value1)
  },
  { deep: true, immediate: true }
)

const routeValue = useRoute()
const router = useRouter()
const backToEpisode = () => {
  router.back()
}

const shows = ref('')
const initGetShowsList = async () => {
  const res = await getShows({ episodeId: routeValue.params.id })
  shows.value = res.shows
}
initGetShowsList()

const queryForm = ref({
  episodeId: 0,
  query: '',
  pageNum: 1,
  pageSize: 10
})
queryForm.value.episodeId = routeValue.params.id

const tableData = ref([])
const total = ref(0)

const initGetCommentsList = async () => {
  const res = await getComments(queryForm.value)
  tableData.value = res.comment
  total.value = res.total
}

// initGetCommentsList()

watch(
  () => queryForm.value.query,
  () => {
    initGetCommentsList()
  },
  { deep: true, immediate: true }
)

const handleSizeChange = (pageSize) => {
  queryForm.value.pageNum = 1
  queryForm.value.pageSize = pageSize
  initGetCommentsList()
}
const handleCurrentChange = (pageNum) => {
  queryForm.value.pageNum = pageNum
  initGetCommentsList()
}

const cellStyle = ({ row, columnIndex }) => {
  if (columnIndex === 1) {
    if (row.color === '#FFFFFF') {
      return null
    }
    return { color: row.color }
  }
  return null
}
</script>

<style lang="scss" scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}
::v-deep .el-pagination {
  margin-top: 10px;
  float: right;
  margin-bottom: 10px;
}
::v-deep .backEpisode {
  margin-right: 20px;
  margin-left: auto;
}
::v-deep .el-input_suffix {
  align-items: center;
}
</style>
